<template>
	<view class="content">
		<loginbg />
		<form class="form" @submit="formSubmit" @reset="formReset">
			<view class="label">
				<view class="labelTitle" v-show="nameplaceholder">姓名</view>
				<input @focus="nameplaceholder=true" @blur="nameplaceholder=false" type="name" name="id_name"
					class="inp" :class="nameplaceholder?'':'noPlaceholder'" @input="nameInp" placeholder="姓名"
					placeholder-class="placeholder" />
			</view>
			<view class="label IDNO">
				<view class="labelTitle" v-show="IDNOplaceholder">身份证号码</view>
				<input @focus="IDNOplaceholder=true" @blur="IDNOplaceholder=false" type="text" name="id_card"
					class="inp" :class="IDNOplaceholder?'':'noPlaceholder'" placeholder="身份证号码"
					placeholder-class="placeholder" @input="IDNOInp">
			</view>
			<!-- 人脸比对 -->
			<!-- <view class="tips">
				人脸比对
			</view> -->
			<button v-show="form.id_name && form.id_card && !incorrect" @click="camera"
				class="login camera">请上传本人照片</button>
			<button form-type="submit" class="login">立即认证</button>
		</form>



		<!--  -->
		<!-- 	<img :src="urls" width="200px" height="200px"/>
		<input style="display: none;" type="file" id='uploadFile' accept="image/*" capture="user"
			@change="readLocalFile()">
		<button @click="imgClick">拍照</button> -->
		<w-compress ref='wCompress' />
	</view>
</template>

<script>
	import loginbg from "../../components/loginbg/loginbg.vue"
	import WCompress from '@/components/w-compress/w-compress.vue'

	import {
		isIdCard,
	} from "@/utils/regular"
	import {
		applyCertificate,
		getFaceIDb,
		upload
	} from "@/api/index.js"
	import {
		fail
	} from "assert"
	export default {
		components: {
			loginbg,
			WCompress
		},
		data() {
			return {
				form: {
					id_name: null,
					id_card: null,
					image_url: null,
				},
				nameplaceholder: false,
				IDNOplaceholder: false,
				incorrect: false,
				// urls: '',
			}
		},
		onLoad() {

		},
		methods: {
			nameInp(e) {
				this.form.id_name = e.detail.value;

			},
			IDNOInp(e) {
				this.form.id_card = e.detail.value;
			},
			camera() {
				if (!this.form.id_name) {
					uni.showToast({
						icon: "none",
						title: "请输入姓名"
					})
					return
				}
				if (!this.form.id_card) {
					uni.showToast({
						icon: "none",
						title: "请输入身份证"
					})
					return
				}
				if (!isIdCard(this.form.id_card)) {
					return
				}
				uni.showLoading({

				})
				upload({
					sourceType: ["camera"],
					wCompress: this.$refs.wCompress
				}).then(res => {

					this.form.image_url = res.src
					getFaceIDb(this.form).then(res => {
						uni.hideLoading()
						if (res.data.incorrect == 100) {
							this.incorrect = true;
							return
						}
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
					}).catch(fail => {
						uni.hideLoading()
					})
				}).catch(fail => {
					uni.hideLoading()
				})
				// 
			},
			formSubmit(e) {
				if (!this.form.id_name) {
					uni.showToast({
						icon: "none",
						title: "请输入姓名"
					})
					return
				}
				if (!isIdCard(e.detail.value.id_card)) {
					return
				}
				if (!this.incorrect) {
					uni.showToast({
						icon: "none",
						title: "请上传本人照片"
					})
					return
				}
				applyCertificate({
						...e.detail.value,
						name: e.detail.value.id_name
					})
					.then(res => {
						uni.setStorageSync('apply_certificate', true);
						uni.redirectTo({
							url: "/pages/notice/index"
						})
					})
			},
			handleImgCompress(url) {
				//alert(url)
				return new Promise((resolve, reject) => {
					this.$refs.wCompress.start(url, {
							pixels: 100000, // 最大分辨率，默认二百万
							quality: 0.1, // 压缩质量，默认0.8
							type: 'png', // 图片类型，默认jpg
							base64: false, // 是否返回base64，默认false，非H5有效
						})
						.then(res => {
							//alert(123123213)
							resolve(res)
						})
						.catch(e => {
							//alert(2323232)
							console.log(e)
							reject(e)
						})
				})
			},
			imgClick() {
				document.getElementById("uploadFile").click();
			},
			//点击选中图片
			readLocalFile() {
				var that_ = this;
				var localFile = document.getElementById("uploadFile").files[0];
				var reader = new FileReader();
				var content;
				var current = this;
				reader.onload = function(event) {
					console.log("onload")
					content = event.target.result;
					that_.urls = content; //base64图片地址
				}
				reader.onerror = function(event) {
					alert('error')
				}
				content = reader.readAsDataURL(localFile, "UTF-8");
				var fileUrls = document.getElementById("uploadFile").value;
				console.log(fileUrls); //图片本机路径
			}
		}
	}
</script>

<style lang="less">
	@import url("../../index.less");

	.content {

		position: relative;
		overflow: hidden;


		.form {
			margin: -50rpx 75rpx;
			display: block;
			// position: relative;
			// left: 125rpx;
			// top: -50rpx;
			width: 600rpx;

			.label {
				margin: 0 auto;
				width: 600rpx;
				height: 97rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				overflow: hidden;
				// padding: 0 37rpx;

				.labelTitle {
					font-size: @font12;
					margin: 10rpx 40rpx;
				}

				.inp {
					opacity: 1;
					font-size: @font14;
					color: #000000;
					position: absolute;
					padding-left: 37rpx;
					width: 410rpx;

					& .placeholder {
						color: #999999;
						line-height: 97rpx;
					}
				}

				.noPlaceholder {
					height: 97rpx;
					width: 410rpx;
				}
			}


			.IDNO {
				margin: 28rpx auto 60rpx;
			}

			.send {
				position: absolute;
				width: 115rpx;
				height: 43rpx;
				border-radius: 22rpx;
				opacity: 1;
				border: 1rpx solid #FF7100;
				font-size: @font12;
				color: #FF7100;
				top: 153rpx;
				right: 157rpx;
				text-align: center;
				line-height: 43rpx;
			}

			.tips {
				font-size: @font12;
				margin-bottom: 6rpx;
			}

			.login {
				width: 500rpx;
				height: 80rpx;
				background: #FF7100;
				border-radius: 40rpx;
				opacity: 1;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: @font16;
			}

			.camera {
				border-radius: 25rpx;
				width: 500rpx;
				height: 70rpx;
				line-height: 70rpx;
				margin-bottom: 60rpx;
			}
		}
	}
</style>